<template>
  <div class="personAccount">
    <el-card :shadow="shadowShow">
      <div class="top">
        <div class="person_nav">
          {{ $t('personInfo.xinxi18') }}
        </div>
      </div>
      <div style="margin-bottom: 15px">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            :label="emailForm.email ? $t('personInfo.xinxi19') : $t('personInfo.xinxi19')"
            name="first"
          />
          <el-tab-pane :label="$t('personInfo.xinxi21')" name="second" />
          <el-tab-pane :label="$t('personInfo.xinxi44')" name="third" />
        </el-tabs>
      </div>
      <!-- 已绑定 -->
      <div v-if="activeName == 'first'" class="optionType">
        <!-- 绑定邮箱 -->
        <div class="optionTitle">
          <span v-show="caminho === 'email'">{{ $t('personInfo.xinxi23') }}</span>
          <span v-show="caminho === 'mobile'">{{ $t('personInfo.xinxi30') }}</span>
        </div>
        <div v-if="!emailForm.email">
          <el-form label-position="left" label-width="0px" :model="emailForm" :size="formItemSize">
            <el-form-item label="" prop="">
              <el-input
                v-show="caminho === 'email'"
                disabled
                v-model="emailForm.email"
                style="width: 320px"
                :placeholder="$t('personInfo.xinxi24')"
              />
              <el-input
                v-show="caminho === 'mobile'"
                disabled
                v-model="emailForm.email"
                style="width: 320px"
                :placeholder="$t('personInfo.xinxi31')"
              />
            </el-form-item>
            <!--<el-form-item label="" prop="" class="formItem formItem_code">-->
            <!--    <el-input style="width:320px" v-model="emailForm.code"-->
            <!--        :placeholder="$t('personInfo.xinxi25')" />-->
            <!--    <span class="code_btn" v-if="!isShow" @click="getyzm">{{ buttonName }}</span>-->
            <!--    <span class="code_btn" v-if="isShow">{{ buttonName }}</span>-->
            <!--</el-form-item>-->
            <!--<el-form-item label="" prop="">-->
            <!--    <el-input style="width:320px" v-model="emailForm.password"-->
            <!--        :placeholder="$t('personInfo.xinxi26')" />-->
            <!--</el-form-item>-->
            <el-form-item label="" prop="">
              <el-button :size="optionButtonSize" type="primary" @click="bindEmail"
                >{{ $t('personInfo.xinxi29') }}
              </el-button>
            </el-form-item>
            <!--            <el-form-item label=""-->
            <!--                          prop="">-->
            <!--              <el-button :size="optionButtonSize"-->
            <!--                         @click="bindEmail"-->
            <!--                         type="primary">{{-->
            <!--                  $t('personInfo.xinxi27')-->
            <!--                }}-->
            <!--              </el-button>-->
            <!--              <el-button :size="optionButtonSize"-->
            <!--                         @click="emailCancel"-->
            <!--                         type="info">{{-->
            <!--                  $t('personInfo.xinxi28')-->
            <!--                }}-->
            <!--              </el-button>-->
            <!--            </el-form-item>-->
          </el-form>
        </div>
        <div v-if="emailForm.email">
          <el-form
            ref="form"
            label-position="left"
            label-width="0px"
            :model="emailForm"
            :size="formItemSize"
          >
            <el-form-item label="" prop="">
              <el-input disabled v-model="emailForm.email" style="width: 320px" />
            </el-form-item>
           
            <el-form-item label="" prop="">
              <el-button :size="optionButtonSize" type="primary" @click="bindEmail"
                >{{ $t('personInfo.xinxi29') }}
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>

     
      <div v-if="activeName == 'first'" class="optionType">
       
      </div>

      <div v-if="activeName == 'second'" class="optionType">
        <!-- 修改密码 -->
        <div class="optionTitle">
          {{ $t('personInfo.xinxi39') }}
        </div>
        <div>
          <el-form
            ref="form"
            label-width="0px"
            :model="mimaForm"
            :rules="mimaRules"
            key="expirationDate"
            :size="formItemSize"
          >
            <el-form-item label="" prop="password" class="f-item">
              <el-input
                v-model="mimaForm.password"
                :type="mima1 ? 'text' : 'password'"
                style="width: 320px"
                :placeholder="$t('personInfo.xinxi40')"
              />
              <div class="yanjin" @click="mima1 = !mima1">
                <img v-if="!mima1" src="@/assets/img/yj-bi.png" alt="" />
                <img v-else src="@/assets/img/yj-kai.png" alt="" />
              </div>
            </el-form-item>
            <el-form-item label="" prop="newPassword" class="f-item">
              <el-input
                v-model="mimaForm.newPassword"
                :type="mima2 ? 'text' : 'password'"
                style="width: 320px"
                :placeholder="$t('personInfo.xinxi41')"
              />
              <div class="yanjin" @click="mima2 = !mima2">
                <img v-if="!mima2" src="@/assets/img/yj-bi.png" alt="" />
                <img v-else src="@/assets/img/yj-kai.png" alt="" />
              </div>
            </el-form-item>
            <el-form-item label="" prop="newPassword2" class="f-item">
              <el-input
                v-model="mimaForm.newPassword2"
                :type="mima3 ? 'text' : 'password'"
                style="width: 320px"
                :placeholder="$t('personInfo.xinxi42')"
              />
              <div class="yanjin" @click="mima3 = !mima3">
                <img v-if="!mima3" src="@/assets/img/yj-bi.png" alt="" />
                <img v-else src="@/assets/img/yj-kai.png" alt="" />
              </div>
            </el-form-item>
            <el-form-item label="" prop="">
              <el-button :size="optionButtonSize" type="primary" @click="userPassword"
                >{{ $t('personInfo.xinxi43') }}
              </el-button>
              <!-- <el-button :size="optionButtonSize" type="info">{{ $t('add.add203') }}</el-button> -->
            </el-form-item>
          </el-form>
        </div>
      </div>

      <div v-if="activeName == 'third'">
        <!-- 注销账号 -->
        <div class="top">
          <div class="person_nav">
            {{ $t('personInfo.xinxi44') }}
          </div>
        </div>
        <div>
          <span class="logoutTip">
            {{ $t('personInfo.xinxi45') }}
          </span>
        </div>
        <div class="logoutBtn">
          <el-button :size="optionButtonSize" type="info" @click="logooutHandle"
            >{{ $t('personInfo.xinxi44') }}
          </el-button>
        </div>
      </div>
    </el-card>
    <Logoout ref="Logoout" />
    <!--<LogooutTip ref="LogooutTip" />-->

    <ChangeBindEmail
      :caminho="caminho"
      :old_email_phone="this.emailForm.email"
      v-model="changeBindEmailDialog.visible"
      @success="onChangeBindEmailSuccess"
    />
  </div>
</template>

<script>
import ChangeBindEmail from './ChangeBindEmail.vue';
import Logoout from './logout.vue'; // 注销
// import LogooutTip from "./logoouttip.vue"; //注销
import { isMobile, isEmail } from '@/utils/validate';
import Cookies from 'js-cookie';

export default {
  name: 'BLZMasterAccount',
  components: {
    ChangeBindEmail,
    Logoout,
    // LogooutTip,
  },
  data() {
    let validatePwd = (rule, value, callback) => {
      let pwdRule = new RegExp(
        /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[a-zA-Z])[0-9a-zA-Z!#$%&'()*+,-./:;<=>?@~!%^¥,\.]{8,32}$/,
      );
      if (pwdRule.test(value)) {
        callback();
      } else {
        callback(this.$t('zhuce.zhuce31'));
      }
    };

    return {
      caminho: '',
      // 更换邮箱弹框
      changeBindEmailDialog: {
        visible: false,
      },
      // 邮箱
      form: {},
      emailForm: {
        email: '',
        code: '',
        password: '',
      },
      buttonName: this.$t('add.add026'),
      count: 60,
      clickCount: 0,
      isShow: false,
      phoneButtonName: this.$t('add.add026'),
      // 手机号
      phoneForm: {
        phone: '',
        code: '',
      },
      mimaForm: {
        password: '',
        newPassword: '',
        newPassword2: '',
      },
      mimaRules: {
        newPassword: [
          {
            validator: validatePwd,
            trigger: 'blur',
          },
        ],
        newPassword2: [
          {
            validator: validatePwd,
            trigger: 'blur',
          },
        ],
      },
      // 微信号
      haveWechat: true,
      // 微信号
      haveWeQQ: true,
      activeName: 'first',
      isBound: false, // 是否绑定
      timer: null,
      mima1: false,
      mima2: false,
      mima3: false,
    };
  },
  created() {
    // 获取当前是手机号还是邮箱登录的
    this.getLoginCaminho();
  },
  mounted() {
    this.getUserInfo(localStorage.getItem('user_id'));
  },

  methods: {
    getLoginCaminho() {
      this.$http
        .get(`/sys/dict/data/verifyLoginMethod`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.caminho = res.data;
            // if(res.data === 'mobile'){

            // }else if(res.data === 'email'){

            // }
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    logooutHandle() {
      this.$refs.Logoout.dialogShow = true;
    },
    handleClick(tab) {
      console.log('1111111', tab);
    },
    onChangeBindEmailSuccess() {
      this.getUserInfo(localStorage.getItem('user_id'));
    },
    // 获取个人信息
    getUserInfo(id) {
      this.$http
        .get(`/sys/user/${id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            if (this.caminho === 'email') {
              this.emailForm.email = res.data.email;
            } else if (this.caminho === 'mobile') {
              this.emailForm.email = res.data.mobile;
            }
            // this.emailForm.email = res.data.email
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    
    // 绑定邮箱
    bindEmail() {
      this.changeBindEmailDialog.visible = true;

      // this.$http.put(`/sys/user/bindEmail`, this.emailForm).then(({ data: res }) => {
      //     if (res.code !== 0) {
      //         return this.$message.error(res.msg)
      //     } else {
      //         this.$message.success(this.$t('personInfo.xinxi50'))
      //         this.emailForm = {
      //             email: "",
      //             code: "",
      //             password: ""
      //         }
      //         this.getUserInfo(localStorage.getItem("user_id"))
      //         clearInterval(this.timer);
      //         this.buttonName = this.$t('add.add026')
      //         this.count = 60
      //         this.isShow = false
      //     }
      // }).catch((err) => {
      //     console.log("err", err)
      // })
    },
    emailCancel() {
      this.emailForm = {
        email: '',
        code: '',
        password: '',
      };
    },
    // 修改密码
    userPassword() {
      if (this.mimaForm.newPassword != this.mimaForm.newPassword2) {
        return this.$message.error(this.$t('personInfo.xinxi51'));
      }
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$http
            .put('/sys/user/password', this.mimaForm)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              } else {
                this.$message.success(this.$t('personInfo.xinxi52'));
                this.mimaForm = {
                  password: '',
                  newPassword: '',
                  newPassword2: '',
                };

                setTimeout(() => {
                  Cookies.remove('token');
                  this.$router.push('/login');
                }, 1000);
              }
            })
            .catch((err) => {
              console.log('err', err);
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.personAccount {
  background: white;
  width: 800px;
  .el-form-item--mini.el-form-item {
    margin-bottom: 43px;
  }
  .person_nav {
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    color: #003e67;
    margin-bottom: 15px;
  }

  .optionType {
    margin-bottom: 30px;

    .optionTitle {
      margin-bottom: 20px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #656d7f;
    }

    .f-item {
      width: 320px;
      position: relative;

      .yanjin {
        width: 16px;
        cursor: pointer;
        position: absolute;
        right: 10px;
        top: -2px;
      }
    }
  }

  .bind {
    margin-bottom: 20px;

    img {
      width: 32px;
      height: 32px;
      margin-right: 12px;
    }

    span {
      margin-left: 12px;
      font-size: 14px;
      font-weight: 400;
      color: #999;
    }
  }

  .logoutTip {
    font-size: 14px;
    font-weight: 400;
    color: #999;
  }

  .logoutBtn {
    margin-top: 30px;
    margin-bottom: 40px;
  }
}

.formItem_code {
  width: 320px;
  position: relative;

  .code_btn {
    position: absolute;
    right: 18px;
    top: 2px;
    color: #003e67;
    cursor: pointer;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 25px;
    color: #003e67;
  }
}
</style>
